<template>
  <a-modal
    centered
    :title="name + '选择'"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="close"
    destroyOnClose
    cancelText="关闭">
    <a-row :gutter="18">
      <a-col :span="16">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item :label="(queryParamText||name)">
                  <j-input v-model="queryParam['name']" :placeholder="'请输入' + (queryParamText||name)"
                           @keyup.enter.native="searchQuery"     />
                </a-form-item>
              </a-col>
<!--              @pressEnter="searchQuery"-->
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="库房名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-select-cang-ku   @keyup.enter.native="searchQuery"       v-model="queryParam['assetFixedCategoryId']"></j-select-cang-ku>
                </a-form-item>
              </a-col>

<!--                <a-col :span="8">-->
<!--                <a-form-item label="类别" disabled>-->
<!--&lt;!&ndash;                  <j-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请选择类型' "&ndash;&gt;-->
<!--&lt;!&ndash;                            />&ndash;&gt;-->
<!--&lt;!&ndash;                  <j-search-select-tag  v-model="queryParam['assetType']"  type="list"&ndash;&gt;-->
<!--&lt;!&ndash;                                       :trigger-change="true"  dict="gf_zcgl_asset_type" :disabled="disableSubmit"&ndash;&gt;-->
<!--&lt;!&ndash;                                       @pressEnter="searchQuery"       placeholder="请选择资产分类"/>&ndash;&gt;-->
<!--&lt;!&ndash;                  :disabled="disableSubmit"&ndash;&gt;-->
<!--                  <j-search-select-tag disabled="true"  v-model="queryParam['assetType']"  type="list"-->
<!--                                       :trigger-change="true"  dict="gf_zcgl_asset_type"-->
<!--                                       @pressEnter="searchQuery"       placeholder="请选择资产分类"/>-->
<!--                </a-form-item>-->
<!--                </a-col>-->
              <a-col :span="4">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<!--                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
                  </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          size="small"
          bordered
          :rowKey="rowKey"
          :columns="innerColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :scroll="{ y: 440 }"
          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
          :customRow="customRowFn"
          @change="handleTableChange">
        </a-table>
      </a-col>
      <a-col :span="8">
        <a-card  style="margin-top: 0px" :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
          <a-table size="small" :rowKey="rowKey" bordered v-bind="selectedTable">
              <span slot="action" slot-scope="text, record, index">
                <a @click="handleDeleteSelected(record, index)">删除</a>
              </span>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import JSelectCangKu from '../../../components/jeecgbiz/JSelectCangKu'
import { getAction } from '@/api/manage'
import Ellipsis from '@/components/Ellipsis'
import { JeecgListMixin } from '@/mixins/componentMix'
import { cloneObject, pushIfNotExist } from '@/utils/util'
import JInput from '@comp/jeecg/JInput'
import JSearchSelectTag from '../../dict/JSearchSelectTag'

export default {
  name: 'JSelectBizComponentModalAsset',
  mixins: [JeecgListMixin],
  components: { JInput, Ellipsis ,JSearchSelectTag,JSelectCangKu},
  props: {

    // close: {
    //   type:Boolean,
    //   default:false
    // },
    assetTypeF: {
      type: String,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    },
    valueKey: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 1400
    },

    name: {
      type: String,
      default: ''
    },
    listUrl: {
      type: String,
      required: true,
      default: ''
    },
    // 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
    valueUrl: {
      type: String,
      default: ''
    },
    displayKey: {
      type: String,
      default: null
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    // 查询条件Code
    queryParamCode: {
      type: String,
      default: null
    },
    // 查询条件文字
    queryParamText: {
      type: String,
      default: null
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    queryParamObj: {
      type: Object,
      default: {}
    },
    // 过长裁剪长度，设置为 -1 代表不裁剪
    ellipsisLength: {
      type: Number,
      default: 12
    },
    disableMixinCreated:true
  },
  data () {
    return {
      isorter: {
        column: '',
        order: ''
      },
      // close:false,
      assetTypeF:'',
      disableSubmit:false,
      innerValue: [],
      // 已选择列表
      selectedTable: {
        pagination: false,
        scroll: { y: 240 },
        columns: [
          {
            ...this.columns[0],
            width: this.columns[0].widthRight || this.columns[0].width
          },
          { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' } }
        ],
        dataSource: []
      },
      renderEllipsis: (value) => ( < ellipsis length = { this.ellipsisLength } > { value } < /ellipsis>),
      url: { 'list': this.listUrl },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 30,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      options: [],
      dataSourceMap: {},
    }
  },
  computed: {
    // 表头
    innerColumns () {
      let columns = cloneObject(this.columns)
      columns.forEach(column => {
        // 给所有的列加上过长裁剪
        // if (this.ellipsisLength !== -1) {
        //   column.customRender = (text) => this.renderEllipsis(text)
        // }
      })
      return columns
    }
  },
  created () {
    this.queryParam.assetType = this.assetTypeF
      setTimeout(() => {
        this.searchQuery

      },1000)

  },

  // created () {
  //
  //   // this.queryParam.assetType = this.assetTypeF
  //
  //   // alert(  this.queryParam.assetType)
  //   // setTimeout(() => {
  //   //   this.searchQuery
  //   //
  //   // },1000)
  //   //
  //
  //
  //
  //
  //
  // },

  watch: {

    // //
    // close: {
    //   deep: true,
    //   immediate: true,
    //   handler (val) {
    //   if(val == true){
    //    alert("草泥马")
    //     this.innerValue = []
    //     this.selectedTable.dataSource = []
    //     this.onClearSelected()
    //     this.close = false
    //   }
    //   }
    // },
    assetTypeF: {
      deep: true,
        immediate: true,
        handler (val) {
        this.queryParam.assetType = val
          this.loadData(1)
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler (val) {

        this.innerValue = cloneObject(val)
        this.valueWatchHandler(val)
        this.queryOptionsByValue(val)
      }
    },
    dataSource: {
      deep: true,
      handler (val) {
        this.emitOptions(val)
        this.valueWatchHandler(this.innerValue)
      }
    },
    queryParamObj: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val){
          this.queryParam = val
        } else {
          this.queryParam = {}
        }
      }
    },
    selectedRowKeys: {
      immediate: true,
      deep: true,
      handler (val) {
        if(val.length>0){
          this.selectedTable.dataSource = val.map(key => {
            for (let data of this.dataSource) {
              if (data[this.rowKey] === key) {
                pushIfNotExist(this.innerValue, data[this.valueKey])
                return data
              }
            }
            for (let data of this.selectedTable.dataSource) {
              if (data[this.rowKey] === key) {
                pushIfNotExist(this.innerValue, data[this.valueKey])
                return data
              }
            }
            console.warn('未找到选择的行信息，key：' + key)
            return {}
          })
        }


      }
    }
  },

  methods: {
    loadData (arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        console.log(this.url.list + ':')
        console.log(res)
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    /** 关闭弹窗 */
    close () {
      this.$emit('update:visible', false)

      setTimeout(() => {
        this.selectedRowKeys = []
        this.selectedTable.dataSource = []
        this.innerValue = []

        this.queryParam.name = ''
      },1)
    },

    valueWatchHandler (val) {
      if (val && val.length > 0) {
        val.forEach(item => {
          this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
            if (data[this.valueKey] === item) {
              pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
            }
          })
        })
      } else {
        this.innerValue = []
        this.selectedTable.dataSource = []
        this.onClearSelected()
      }
    },

    queryOptionsByValue (value) {
      if (!value || value.length === 0) {
        return
      }
      // 判断options是否存在value，如果已存在数据就不再请求后台了
      // let notExist = false
      // for (let val of value) {
      //   let find = false
      //   for (let option of this.options) {
      //     if (val === option.value) {
      //       find = true
      //       break
      //     }
      //   }
      //   if (!find) {
      //     notExist = true
      //     break
      //   }
      // }
      // if (!notExist) return
      getAction(this.valueUrl || this.listUrl, {
        // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
        [this.valueKey]: value.join(',') + ',',
        pageNo: 1,
        pageSize: value.length
      }).then((res) => {
        if (res.success) {
          let dataSource = res.result
          if (!(dataSource instanceof Array)) {
            dataSource = res.result.records
          }
          this.emitOptions(dataSource, (data) => {
            pushIfNotExist(this.innerValue, data[this.valueKey])
            pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
            pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
          })
        }
      })
    },

    emitOptions (dataSource, callback) {
      dataSource.forEach(data => {
        let key = data[this.valueKey]
        this.dataSourceMap[key] = data
        pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
        typeof callback === 'function' ? callback(data) : ''
      })
      this.$emit('options', this.options, this.dataSourceMap)
    },
    /** 完成选择 */
    handleOk () {
      let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
      // this.selectedRowKeys.splice(0, 1)
      let data = JSON.parse(JSON.stringify(value))
      this.$emit('input', data)
      this.close()
      setTimeout(() => {

        this.selectedRowKeys = []
        this.selectedTable.dataSource = []
        this.innerValue = []

      },1000)


    },

    /** 删除已选择的 */
    handleDeleteSelected (record, index) {
      this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
      this.selectedTable.dataSource.splice(index, 1)
      this.innerValue.splice(index, 1)
    },

    customRowFn (record) {
      return {
        on: {
          click: () => {
            let key = record[this.rowKey]
            if (!this.multiple) {
              this.innerValue = []
              this.selectedRowKeys = [key]
              this.selectedTable.dataSource = [record]
            } else {
              let index = this.selectedRowKeys.indexOf(key)
              if (index === -1) {
                this.selectedRowKeys.push(key)
                this.selectedTable.dataSource.push(record)
              } else {
                this.handleDeleteSelected(record, index)
              }
            }
          }
        }
      }
    }

  }
}
</script>
<style lang="less" scoped>
</style>